<!DOCTYPE html>
<html>
<body>
<canvas id ='output' width='150' height='150'></canvas>
<script>
var aCanvas = document.getElementById('output');
var ctx = aCanvas.getContext('2d');

var patternCanvas = document.createElement('canvas');
patternCanvas.width = 30;
patternCanvas.height = 30;
var patternCtx = patternCanvas.getContext('2d');        
patternCtx.fillStyle = '#f00';                                                     
patternCtx.fillRect(0, 0, 15, 15);                                              
patternCtx.fillStyle = '#0f0';                                                     
patternCtx.fillRect(15, 0, 15, 15);                                             
patternCtx.fillStyle = '#00f';
patternCtx.fillRect(0, 15, 15, 15);
patternCtx.fillStyle = "#ff0";
patternCtx.fillRect(15, 15, 15, 15);

ctx.drawImage(patternCanvas, 0, 0);
ctx.drawImage(patternCanvas, 30, 30, 30, 30);
// stretch the image
ctx.drawImage(patternCanvas, 8, 8, 15, 15, 60, 60, 60, 60);
// reduce the image
ctx.drawImage(patternCanvas, 8, 8, 15, 15, 120, 120, 15, 15);
</script>
</body>
</html>
